<template>
    <div class="flex_x fx_row fx_sa">      
        <div style="width:39%;height:600px">
            <div class="flex_x fx_row select_bg" >
                <div class="search_input_box" ><input class="search_input" type="text" /></div>
                <div class="search flex_x fx_ac fx_pc">搜索</div>
            </div>
            <div class="flex_x fx_c fx_ac s" style="height:550px;margin-top:20px">
                <img class="img_size" src="https://img0.baidu.com/it/u=2414212031,2828469756&fm=26&fmt=auto"/>
                <table>
                    <tr>
                        <td>书名:</td>
                        <td>安徒生童话</td>
                    </tr>
                    <tr>
                        <td>编号:</td>
                        <td>101011010</td>
                    </tr>
                    <tr>
                        <td>作者:</td>
                        <td>安徒生</td>
                    </tr>
                    <tr>
                        <td>类型:</td>
                        <td>阅读类</td>
                    </tr>
                    <tr>
                        <td><el-button style="width:100px" type="primary">借书</el-button>
                    </td>
                        <td><el-button style="width:100px" type="danger">删除</el-button></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="flex_x fx_c fx_ac right">
            <el-table
                class="s"
                :data="bookData"
                border
                :header-cell-style="{textAlign: 'center',background:'#c2c2c7',color:'black'}"
                :cell-style="{ textAlign: 'center' }"
                >
                <el-table-column
                prop="bookName"
                label="书名"
                >
                </el-table-column>
                <el-table-column
                prop="bookTime"
                label="规定还书时间"
                width="150">
                </el-table-column>
                <el-table-column
                prop="bookTime"
                label="还书时间"
                width="150">
                </el-table-column>
                <el-table-column
                prop="bookStatus"
                label="状态"
                width="150">
                    <!-- <template scope="scope">{{scope.row.bookStatus | statusFilters}}</template> -->
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="100">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bookData: [{
                bookName: '山海经',
                bookTime: '2021-10-1',
                bookStatus: 1
                },{
                bookName: '西游记',
                bookTime: '2021-12-1',
                bookStatus: 2
                },{
                bookName: '雷瑟',
                bookTime: '2021-10-10',
                bookStatus: 3
                },{
                bookName: '十万个为什么',
                bookTime: '2021-10-20',
                bookStatus: 2
                }]
        }
    },
    filters:{
        statusFilters(val){
            var value
            switch (val) {
                case 1:
                    value = '已还'
                    break;
                case 2:
                    value = '未还'
                    break;
                case 3:
                    value = '逾期'
                    break;
                default:
                    break;
            }
            return value
        }
    },
    mounted(){
        
    },
    methods:{

    }
    
    
}
</script>
<style scoped>
.search {
    width: 80px;
    border: 1px solid black;
    border-radius: 0 10px 10px 0;
}
.search_input{
    width: 395px;
    height: 40px;
    margin-left: 20px;
    /* background: royalblue; */
    border: none;
}
.search_input_box{
    width: 420px;
    border: 1px solid black;
    border-radius: 10px 0 0 10px;
    background:white;
}
.right{
    width: 50%;
    height: auto;
    background-color: lightblue;
}
.img_size{
    width: 220px;
    height: 300px;
    
}
.s{
    background-color: lightblue;
}
.flex_x{
    display: flex;
}
.fx_row{
    flex-direction: row;
}
.fx_c{
    flex-direction: column;
}
.fx_ac{
    align-items: center;
}
.fx_pc{
    justify-content: center;
}
.fx_sa{
    justify-content: space-around;
}
</style>